<template>
  <div class="shopBag">
    <!-- 头部导航栏 -->
    <div class="nav">
      <van-nav-bar title="购物车" fixed>
        <!-- 插槽 -->
        <template #right v-if="!show">
          <!-- 数据不为空，才显示编辑 -->
          <div v-if="shopbagData.length > 0" @click="edit">编辑</div>
        </template>

        <!-- 插槽 -->
        <template #right v-else>
          <!-- 数据不为空，才显示编辑 -->
          <div v-if="shopbagData.length > 0" @click="edit">完成</div>
        </template>
      </van-nav-bar>
    </div>

    <!-- 如果shopbagData没有数据（shopbagData.length == 0），显示空状态 -->
    <div class="empty" v-if="shopbagData.length == 0">
      <van-empty
        class="custom-image"
        image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
        description="111111111"
      />
    </div>
    <!-- 如果shopbagData有数据（shopbagData.length > 0），显示商品数据 -->
    <div v-if="shopbagData.length > 0">
      <!-- 粉色的区域放图片 -->
      <div class="pink-area"></div>
      <!-- 放产品内容的 -->
      <div class="main-content">
        <!-- 白色背景的产品 -->
        <div class="product-item" v-for="(item, index) in shopbagData" :key="index">
          <!-- 左边复选框 -->
          <div class="choose">
            <van-checkbox v-model="item.checked" @change="danSelect"></van-checkbox>
          </div>
          <!-- 具体产品信息 -->
          <div class="detail-product">
            <img :src="item.product.smallImg" alt />
            <div class="right-box">
              <div class="pro-name">{{item.product.name}}</div>
              <div class="price-bu">
                <div class="price">&yen;{{item.product.Price}}</div>
                <div class="bu">
                  <van-stepper v-model="item.count" theme="round" button-size="22" disable-input />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 结算 -->
      <div class="pay" v-if="!show">
        <div>
          <van-checkbox v-model="allChoose" @click="allSelect">全选</van-checkbox>
        </div>
        <div class="all">
          合计：
          <span>&yen;{{allPice}}</span>
        </div>
        <div class="order" @click="toOrder">提交订单</div>
      </div>

      <!-- 删除 -->
      <div class="del" v-else>
        <div>
          <van-checkbox v-model="allChoose" @click="allSelect">全选</van-checkbox>
        </div>
        <div class="all-del" @click="delete1">删除选择</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "Shopbag",
  data() {
    return {
      // 存放购物车数据
      shopbagData: [],

      // 控制全局是否选中的按钮  默认没有全部选中
      allChoose: false,

      // 用来控制  显示提交订单  或者显示删除选择
      show: false,

      // 装要删除的数据
      delArr: []
    };
  },
  created() {
    this.getCar();
  },

  // 计算属性  一个值 由多个值影响的时候 比较常用 :影响总价格值  ： 产品的数据item.count   产品是否被勾选  item.checked
  computed: {
    allPice() {
      // 初始话价格
      let price = 0;
      for (let index = 0; index < this.shopbagData.length; index++) {
        //  首选判断  是否被勾选  如果勾选了我才计算价格  数量* 价格   以防价格和数量不是数字  将他们转化问数字
        if (this.shopbagData[index].checked) {
          price =
            price +
            Number(this.shopbagData[index].count) *
              Number(this.shopbagData[index].product.Price);
        }
      }

      // 保留两位小数
      return price.toFixed(2);
    }
  },

  methods: {
    // 请求购物车里面的 数据
    getCar() {
      this.axios({
        method: "get",
        url: "/findCar",
        params: {
          id: localStorage.getItem("token")
        }
      })
        .then(res => {
          // 查询成功，有数据的情况下，
          // 每次赋值清空上一次的值
          this.shopbagData = [];
          if (res.data.stutas == 1302) {
            // this.shopbagData = res.data.data;

            //为选择按钮做准备  每个产品都添加个布尔值  用来控制是否选中
            res.data.data.map(v => {
              v.checked = false;
            });

            this.shopbagData = res.data.data;

            console.log(this.shopbagData);
          }
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },

    //单选时候触发
    danSelect() {
      for (let index = 0; index < this.shopbagData.length; index++) {
        // 遍历, 如果勾选的按钮  有一个是没有被勾选的时候  那么全选按钮就是  false
        if (this.shopbagData[index].checked == false) {
          this.allChoose = false;
          return;
        }
      }

      // 如果全部都是单选 都勾上了,那么就以为全选按钮是 true
      this.allChoose = true;

      console.log("单选", this.shopbagData);
    },

    //全选时候触发
    allSelect() {
      // let arr = this.shopbagData;
      this.shopbagData.map(v => {
        v.checked = this.allChoose;
      });

      // this.shopbagData = arr;

      // console.log('全选按钮的',this.shopbagData);

      // for (let index = 0; index < this.shopbagData.length; index++) {
      //   // 让每个单选的状态  等于 全选的状态
      //   this.shopbagData[index].checked = this.allChoose
      // }
    },

    //控制show的状态变化
    edit() {
      //!false = true     !true = false
      this.show = !this.show;
    },

    // 专门来处理勾选的数据

    collection() {
      this.delArr = []; //每次收集之前都把上一次收集的数据清空
      this.shopbagData.map(v => {
        // 判断如果是勾选的，那么就添加
        if (v.checked == true) {
          this.delArr.push(v.carId);
        }
      });
    },
    // 删除
    delete1() {
      // 如果没有登录就跳转登录界面
      if (!localStorage.getItem("token")) {
        // 跳转到登陆页面
        this.$router.push({ name: "Login" });
        return;
      }
      // 删除之前把要删除的购物车id收集起来
      this.collection();

      this.axios({
        method: "post",
        url: "/deleteCar",
        data: {
          id: localStorage.getItem("token"),
          // 勾选后产品的那个 carID
          carIdArr: this.delArr
        }
      })
        .then(res => {
          console.log(res);
          if (res.data.stutas == 1501) {
            // 重新调用购物车数据库

            Toast("删除成功");
            this.getCar();
          }
        })
        .catch(err => {});
    },

    // 提交订单
    toOrder() {
      // 默认是false
      let pass = false;
      // 跳转前判断它有没有勾选， 如果没有勾选，那么就跳转不了 提示请勾选
      this.shopbagData.map(v => {
        if (v.checked == true) {
          pass = true; //如果有一个true 那么就意味他可以通过
        }
      });

      if (!pass) {
        Toast("请勾选");
        return;
      }

      let data = [];
      // 遍历将勾选的 产品放入一个数组里面
      this.shopbagData.map((v, index) => {
        if (v.checked == true) {
          data.push(this.shopbagData[index]);
        }
      });

      // 跳转订单页面  传递一些值过去，首先是总价格 还有就是勾选的 产品
      this.$router.push({
        name: "Pay",
        query: { data: JSON.stringify(data), allPice: this.allPice }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.empty {
  margin-top: 100px;
}
.all {
  margin-left: 80px;
}
.order,
.all-del {
  padding: 10px 20px;
  background-color: #fb4d30;
  color: #fff;
  border-radius: 30px;
}
.pay,
.del {
  position: fixed;
  bottom: 50px;
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
}

.product-item:nth-last-child(1) {
  margin-bottom: 50px;
}
.product-item {
  margin-bottom: 10px;
}

.shopBag {
  overflow: hidden;
}

.pink-area {
  height: 50px;
  background: pink;
  margin-top: 46px;
}

.main-content {
  padding: 10px;

  .product-item {
    height: 100px;
    border-radius: 10px;
    background: white;
    display: flex;
    align-items: center;
    overflow: hidden;

    .choose {
      width: 35px;
      margin-left: 10px;
    }
  }

  .detail-product {
    // background: pink;
    flex: 1;
    height: 100px;
    display: flex;

    img {
      height: 100px;
      width: 100px;
    }

    .right-box {
      flex: 1;
      height: 80px;
      padding: 10px;
      // background: skyblue;

      .pro-name {
        height: 40px;
        font-size: 16px;
        // background: pink;
        width: 200px;
        /* 多行文本溢出 */
        text-overflow: ellipsis;
        word-wrap: break-word;
        overflow: hidden;
        display: -webkit-box;
        /*行数*/
        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;
      }

      .price-bu {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}
</style>